<!-- 背景磨砂玻璃效果 -->
<!-- <template>
	<div class="background">
	      <div class="background-content">
	        <div class="background-content-image"></div>
	        <img
	          src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
	        />
	      </div>
	</div>
</template>

<script>
	
</script>

<style>
  .background {
    width: 260px;
    height: 200px;
    overflow: hidden; /* 避免虚化的阴影和边框会溢出。 */
  }

  .background-content {
    width: 260px;
    height: 100%;
    position: relative;
    /* 让图片居中显示 */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .background-content-image {
    position: absolute;
    /* 重点，不能让背景大过于展示的图片 */
    z-index: -1;
    width: 260px;
    height: 100%;
    filter: blur(8px); /* 重点：使用的是 filter 来实现的 */
    background-image: url(https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp); 
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  img {
    max-height: 100%;
  }
</style> -->



<!-- nutui 分类测试 -->
<!-- <template>
	<nut-category :category="category" @change="change">
		<nut-categorypane :categoryChild="categoryChild" @onChange="onChange">
		</nut-categorypane>
	</nut-category>
</template>
<script setup lang="ts">
	import {
		reactive,
		toRefs,
		onMounted
	} from 'vue';

	const data = reactive({
		categoryInfo: {},
		category: [{}],
		categoryChild: [{}]
	});

	onMounted(() => {
		setTimeout(() => {
			getData();
		}, 500);
	});

	const getData = () => {
		fetch('//storage.360buyimg.com/nutui/3x/categoryData.js')
			.then((response) => response.json())
			.then((res) => {
				const {
					categoryInfo,
					categoryChild
				} = res;
				data.categoryInfo = categoryInfo;
				data.category = categoryInfo.category;
				data.categoryChild = categoryChild;
			})
			.catch((err) => console.log('Oh, error', err));
	};

	const change = (index: any) => {
		data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children as any);
	};
	const onChange = () => {
		console.log("当前分类数据");
	}
const { categoryInfo, category, categoryChild } = toRefs(data)
</script>
 -->


<!-- 磨砂背景
 <template>
	   <van-cell-group inset>
	   	<van-field  @click="one()" name="用户名" label="用户名" placeholder="请输入用户名" />
	   	<van-field  @click="two()" type="password" name="密码" label="密码" placeholder="请输入密码" />
	   </van-cell-group>
     引入图片
     <img id="pic" style="width:80%;" :src="imgArr[0]">

 </template> -->

<!-- <script setup>
       var imgArr=[
         "../src/assets/images/login_passwd.png",
         "../src/assets/images/login.png"
       ];
 
       function one(){
         const msg=document.getElementById("pic");
         msg.src=imgArr[0];
       };
 
       function two(){
         const msg=document.getElementById("pic");
         msg.src=imgArr[1];
       }

 </script> -->

<!-- <template>
	<div class="contain">
		<nut-button>123</nut-button>
	</div>
</template>
<style>
.contain {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	background: linear-gradient(45deg, #71C8E2, #FFB5C5);
}
</style> -->



<!-- <template>
	<navbar />
	<keep-alive>
		<component :is="currentComponent" :data="data.data"></component>
	</keep-alive>
</template>

<script lang="ts" setup>
	import {
		ref,
		markRaw,
		onMounted,
		reactive
	} from 'vue'
	import Card from '_c/card/Card.vue'
	import router from '@/router'

	const data = reactive({
		"data": []
	})


	const currentComponent = ref(null)

	onMounted(() => {
		changeToResult()
	})

	function changeToResult() {
		currentComponent.value = markRaw(Card)
		data.data = [{
				id: 5,
				title: "サキュバス喚んだら義母が来た!?",
				imgUrl: '../static/img/206-1.jpg',
				desc: "エンガワ卓&チンジャオ娘。の最強タッグが贈る「サキュバス喚んだら義母が来た!?」が待望のアニメ化！",
				tag:"动漫"
			},
			{
				id: 6,
				title: "サキュバス喚んだら義母が来た!?",
				imgUrl: "../static/img/206-1.jpg",
				desc: "エンガワ卓&チンジャオ娘。の最強タッグが贈る「サキュバス喚んだら義母が来た!?」が待望のアニメ化！",
				tag:"动漫"
			}
		]
	}
</script>

<style>
</style> -->

<!-- <template>
	<van-field
	  v-model="result"
	  is-link
	  readonly
	  label="城市"
	  placeholder="选择城市"
	  @click="showPicker = true"
	/>
	<van-popup v-model:show="showPicker" round position="bottom">
	  <van-picker
	    :columns="columns"
	    @cancel="showPicker = false"
	    @confirm="onConfirm"
	  />
	</van-popup>
</template>
<script setup>
	import { ref } from 'vue';
	
	const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华'];
	const result = ref('');
	const showPicker = ref(false);

	const onConfirm = (value) => {
	  result.value = value;
	  showPicker.value = false;
	};
	
</script> -->

<template>
	<van-form @submit="onSubmit">
		<!-- ...中间表单的省略了... -->
		<van-field
	        label="故障照片">
	        <template #input>
	        	<!-- 考虑到除了新增，修改时也要用到这个页面，且只有单张照片，而且数据库里直接存的路径，在这里可以展示一下已经上传的图片，也可以做点击预览 -->
	            <van-image 
	                :src="reportForm.reportPic" 
	                fit="contain" v-if="reportForm.reportPic != ''"/>
	            <!-- 图片选择，上传前判断格式，删除前做数据处理 -->
	            <van-uploader 
	                v-model="reportPic" 
	                :after-read="afterRead" 
	                :before-delete="beforeDelete"
	                :max-count="1" />
	        </template>
	    </van-field>
	    <div style="margin: 10px">
	        <van-button block type="info" native-type="submit">提交</van-button>
	    </div>
	</van-form>
</template>

<script>
	let forms = null; //设置公共变量，用来创建 FromData 对象，把文件带到后台
	export default {
		data() {
	        return {
	            //表单
	            reportForm: {
	                equipRepairNo: '',//数据库主键
	                //...
	                reportPic: '', //这个是数据库中存的路径，可以用来直接预览
	            },
	            //组件中绑定的照片属性
	            reportPic: [],
	        }
	    },
		methods: {
			//提交表单
	        onSubmit(values){
	            Dialog.confirm({
	                title: '提示',
	                message: '确认提交吗？'
	            }).then(() => {
	                //1.axios提交表单信息
					axios({
		                method: "post",
		                url: "/user",
		                data: this.reportForm
		            }).then((res) => {
		                if(res.code == 200){
		                    Toast.success(res.msg);
		                    this.reportForm.equipRepairNo = res.data;
							//2.表单提交完成后再提交图片信息
		                    this.reportPicUpload();
		                }else{
		                    Toast.fail(res.msg);
		                }
		            });
	            }).catch(() => {});
	        },
	        //图片选择后回调，这里就是重点了，就是在选择照片后，将照片的信息封装到FormData对象中
	        //注意我这里是单图上传，所以直接new了，如果是多图的话，应该要考虑添加和删除FormData中的元素
			afterRead(file){
			    //创建FormData对象。上传图片需要转换二进制，这里要用到FormData
			    forms = new FormData();
			    //"file"表示给后台传的属性名字
			    forms.append("file", file.file); //获取上传图片信息
			},
			//图片上传的前置处理
			beforeRead(file) {
			    if (file.type !== 'image/jpeg' || file.type !== 'image/jpg' || file.type !== 'image/png') {
			        Toast('请上传图片格式');
			        return false;
			    }
			    return true;
			},
			//图片删除前回调，删除时将公共变量forms中的文件信息一并删除
			beforeDelete(file){
			    forms = null;
			    return true;
			},
	        //图片上传，由提交按钮调用本方法实现手动上传
	        reportPicUpload(){
	            //如果文件列表为空，则不需要调用上传
	            if(forms == null || forms.length == 0){
	                return;
	            }
	            axios({
	                method: "post",
	                url: "/user",
	                data: forms,
	                params: {
	                    equipRepairNo: this.reportForm.equipRepairNo
	                }
	            }).then((res) => {
	                if(res.code == 200){
	                    Toast.success(res.msg);
	                    this.reportForm.reportPic = res.data;
	                    this.getRepairInfoByNo(this.reportForm.equipRepairNo);
	                }else{
	                    Toast.fail(res.msg);
	                }
	            }).catch((err) => {
	                Toast.fail("图片上传失败");
	            });
	        },
		}
	}

</script>
